<template>
  <el-dialog title="选择关联属性" :visible.sync="associateGroupRelationVisible"
             @close="dialogClose">
    <el-form :inline="true">
      <el-form-item label="排序">
        <el-input-number v-model="tempRelationForAdding.attrSort" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="!addBindingButtonAvailable" type="success" @click="submitRelation">添加绑定属性</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="!deleteBatchAvailable" type="danger" @click="deleteBatchRelation">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="availableAttrList">
      <el-table-column label="要关联的属性Id" prop="attrId">
        <!--<el-select v-model="tempRelationForAdding.attrId" filterable placeholder="请选择"
                   @change="addBindingButtonAvailable=true">
          <el-option
            v-for="item in availableAttrList"
            :key="item.attrId"
            :label="item.attrName"
            :value="item.attrId">
          </el-option>
        </el-select>-->
      </el-table-column>
      <!--
            {
              "attrId": 1,
              "attrName": "屏幕材质类型",
              "searchType": 1,
              "icon": "2020/09/22/cfbab919-a6bf-4506-8bf5-09e5a41b4fa7-66293.jpg",
              "valueSelect": "OLED,AMOLED",
              "attrType": 1,
              "enable": 0,
              "catelogId": 225,
              "showDesc": 1,
              "message": "已绑定屏幕",
              "bindable": false
            },

      -->
      <el-table-column label="属性名" prop="attrName"></el-table-column>
      <el-table-column label="图标" prop="icon">
        <template slot-scope="slot">
          <img :src="hostAddress+slot.row.icon" width="100" alt="" v-if="hostAddress">
        </template>
      </el-table-column>
      <el-table-column label="可选值" prop="valueSelect"></el-table-column>
      <el-table-column label="属性类型" prop="attrType"></el-table-column>
      <el-table-column label="绑定操作" prop="bindable">
        <template slot-scope="slot">
          <el-button v-if="slot.row.bindable" type="success" @click="submitRelation(slot.row.attrId)">添加绑定</el-button>
          <el-tag v-else v-text="slot.row.message"></el-tag>
        </template>
      </el-table-column>
    </el-table>

  </el-dialog>
</template>

<script>
import attrGroupRelationApi from '../../../../api/product/attrGroupRelationApi'
import uploadToAiliOss from '../../../../api/uploadToAiliOss'

export default {
  name: 'addAssociationAttr',
  data () {
    return {
      addBindingButtonAvailable: false,
      deleteBatchAvailable: false,
      associateGroupRelationVisible: false,
      availableAttrList: [],
      tempRelationForAdding: {
        'attrGroupId': null,
        'attrId': null,
        'attrSort': 0,
        // "id": 0
      },
      hostAddress: null,
      attrGroupId:null
    }
  },
  methods: {
    async getAvailableAttrForAssociation (attrGroupId) {

      if(attrGroupId){
        this.attrGroupId = attrGroupId;
      }

      let p2 = await attrGroupRelationApi.getAvailableBindingAttr(this.attrGroupId)

      this.availableAttrList = p2.data.page.list
      // 中加夹杂了一个dialog组件，值无法传递
      //this.$refs.associateDialogRef.availableAttrList = this.availableAttrList
      console.log('可选择的属性是', p2.data.page.list)

      this.tempRelationForAdding.attrGroupId = this.attrGroupId
    },
    deleteBatchRelation () {

      let attrNameArray = this.selectedRowList.map(relation => {
        return relation.attrName
      })

      this.$confirm(`此操作将永久删除【${attrNameArray.join(',')}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {

        let deletedRelationId = this.selectedRowList.map(relation => {
          return relation.id
        })

        attrGroupRelationApi.deleteRelationBatch(deletedRelationId).then(({data}) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getRelationList(this.attrGroupId)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    submitRelation (attrId) {
      this.tempRelationForAdding.attrId  = attrId;
      attrGroupRelationApi.save(this.tempRelationForAdding).then(({data}) => {
        this.$message({
          message: '属性绑定成功',
          type: 'success'
        })
        this.$emit('update-relation');
        this.getAvailableAttrForAssociation(this.attrGroupId);
        //this.getRelationList(this.tempRelationForAdding.attrGroupId);
      })
    },
    dialogClose () {
      this.tempRelationForAdding = {
        'attrGroupId': null,
        'attrId': null,
        'attrSort': 0,
        // "id": 0
      }
    },
    getHostAddress () {
      uploadToAiliOss.getHostAddress().then(({data}) => {
        this.hostAddress = data.host + '/'
      })
    }
  },
  created () {
    this.getHostAddress();
  }
}
</script>

<style scoped>

</style>
